<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>缴费信息列表</title>

    <style>
        .x-nav{padding:0 20px;position:relative;z-index:99;border-bottom:1px solid #e5e5e5;line-height:39px;height:39px;overflow:hidden}

        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
    <!--    解决layui复选框不居中显示的bug-->
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>维修管理</cite></a>
              <a><cite>维修接单</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="layui-inline">
    <label class="layui-form-label">维修设备名</label>
    <div class="layui-input-inline">
        <input type="text" name="likedevicename" id="likedevicename" autocomplete="off" placeholder="请输入" class="layui-input">
    </div>
</div>
<div class="layui-inline">
    <div class="layui-input-inline">
        <button class="layui-btn" id="searchBtn" lay-submit
                lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
            <i class="layui-icon layui-icon-search"></i> 查询
        </button>
        <button class="layui-btn" id="reset">重置</button>
    </div>
</div>


<div class="layui-col-xs12">
    <table id="repairStreamTable" lay-filter="repairStreamTable" ></table>
</div>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<script type="text/javascript">
    $(window).on('load',function() {
        let item = localStorage.getItem("code");
        if (item != 0) {
            window.location.href = "/login.jsp"
        }
    });
    layui.use(['element'], function(){
        var element=layui.element;
        element.init();
    });

    layui.use(["table","form","upload","layer","tree","laydate"],function() {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var tree = layui.tree;
        var laydate=layui.laydate;

        //渲染table表格=====开始
        table.render({
            elem: '#repairStreamTable'
            ,page: true
            ,limit:5
            ,limits:[5,8,12]
            ,url: 'http://localhost:8888/hy-repair-stream/showRepairStream1' //数据接口
            ,cols: [[ //表头
                {field: 'id',width:60,  title: '编号' }
                ,{field: 'deviceName', title: '维修设备名'}
                ,{field: 'device', title: '报修描述'}
                ,{field: 'rsPhoto', title: '照片'
                    ,templet:function(d){
                        return "<img src='"+d.rsPhoto+"' height='50'/>";
                    }
                }
                ,{field: 'repairName',width:150, title: '维修人员名称'}
                ,{field: 'place',width:150,  title: '维修地点'}
                ,{field: 'userName', title: '报修人'}
                ,{field: 'createTime', width:170, title: '创建时间',sort: true,}
                ,{field: 'state', title: '状态',
                    templet:function(d){
                        if(d.state==1){
                            return "待接单";
                        } else if(d.state==2){
                            return "已接单";
                        } else if(d.state==3){
                            return "待评价";
                        } else if(d.state==4){
                            return "已结束";
                        }else {
                            return "";
                        }
                    }
                }
                ,{title:"操作", width:300, align:'center', toolbar: '#barDemo'}
            ]]
        });


        /*监听table表格上面的操作按钮====开始*/

        table.on("tool(repairStreamTable)",function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'jiedan'){
                //调用confirm方法
                layer.confirm('是否确认接单？',function (ss) {
                    //发出ajax请求
                    $.ajax({
                        url: "http://localhost:8888/hy-repair-stream/jiedanRepairStream",
                        data: "id="+data.id,
                        dataType: "json",
                        success: function (uyg) {
                            //提示删除成功，刷新table表格
                            layer.msg("接单成功");
                            table.reload("repairStreamTable");
                        }
                    });
                    layer.close(ss);
                });
            }
        });

    })


    $('#searchBtn').on('click', function () {
        layui.use("table",function() {
            let table = layui.table;
            table.render({
                elem: '#repairStreamTable'
                ,page: true
                ,limit:5
                ,limits:[5,8,12]
                ,where: {
                    likedevicename:$("#likedevicename").val()
                }
                ,url: 'http://localhost:8888/hy-repair-stream/showRepairStream1' //数据接口
                ,cols: [[ //表头
                    {field: 'id',width:60,  title: '编号' }
                    ,{field: 'deviceName', title: '维修设备名'}
                    ,{field: 'device', title: '报修描述'}
                    ,{field: 'rsPhoto', title: '照片'
                        ,templet:function(d){
                            return "<img src='"+d.rsPhoto+"' height='50'/>";
                        }
                    }
                    ,{field: 'repairName',width:150, title: '维修人员名称'}
                    ,{field: 'place',width:150,  title: '维修地点'}
                    ,{field: 'userName', title: '报修人'}
                    ,{field: 'createTime', width:170, title: '创建时间',sort: true,}
                    ,{field: 'state', title: '状态',
                        templet:function(d){
                            return d.state==1?"已受理":"未受理";
                        }
                    }
                    ,{title:"操作", width:300, align:'center', toolbar: '#barDemo'}
                ]]
            });
        });
    });
    $("#reset").click(function(){
        $("input[type='text']").prop("value","");
    });


</script>

<script type="text/html" id="barDemo">
    {{#  if(d.state==1){ }}
    <button type="button" class="layui-btn  layui-btn-sm" lay-event="jiedan">接单</button>
    {{#  }  }}
</script>

</body>
</html>
